<template>
    <div class="pageContainer">
        <div class="searchWarp">
            <el-form inline>
                <template v-for="condition in listCondition">
                    <CText :title="condition.name" v-model="condition.value"></CText>
                </template>
            </el-form>
            <div class="schLine">
                <CBtn @click="search(1)">查询</CBtn>
            </div>
        </div>
        <div class="treeTable">
            <div style="flex:1;">
                <div class="btnWarp">
                    <CBtn @click="showEdit">新增</CBtn>
                    <CBtn>批量删除</CBtn>
                </div>
                <CPageTable :data="tableData" :curPage="paging.curPage" :total="paging.total" @changeSize="changeSize" @changePage="search">
                    <template slot-scope="scope">
                        <CBtn type="text" @click="showEdit(scope.row)">修改</CBtn>
                        <CBtn type="text" @click="doDel(scope.row)">删除</CBtn>
                    </template>
                </CPageTable>
            </div>
        </div>
        <CDailog title="新增/编辑" :isShow="isShowEdit" @close="isShowEdit = false" @enter="doSave">
            <el-tabs v-model="curTab" style="width:100%;">
                <el-tab-pane label="基本信息" name="base">
                    <el-form :inline="true">
                        <CText size="2" form v-model="mm.casNo" title="CAS号" field="title"></CText>
                        <CText size="2"form v-model="mm.title" title="标题" field="title"></CText>
                        <CSUpload size="2"form v-model="mm.imgList" title="封面图" field="imgList"></CSUpload>
                        <CSelect opType="opFirstSyndbCate" size="2" form v-model="mm.fkCateId" title="主分类" field="fkCateId"></CSelect>
                        <CSelect opType="opSecondSyndbCate" size="2" form v-model="mm.fkSubcateId" title="次分类" field="fkSubcateId"></CSelect>
                        <CText size="2" form v-model="mm.yield" title="收率" field="yield"></CText>
                        <CText size="2" form v-model="mm.refContent" title="文章引用" field="refContent"></CText>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="文章内容" name="listContent">
                    <CBtn @click="addContent">新增</CBtn>
                    <el-table :data="listContent" max-height="450">
                        <el-table-column
                            fixed
                            label="类型">
                            <template slot-scope="scope">
                                <CSelect :size="2" v-model="scope.row.contentType" opType="opSyndbType"></CSelect>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed
                            label="文字">
                            <template slot-scope="scope">
                                <CText :size="4" v-model="scope.row.txtContent"></CText>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed
                            label="图片">
                            <template slot-scope="scope">
                                <CSUpload v-if="scope.row.contentType == 'IMGTEXT'" :size="4" v-model="scope.row.imgSrc"></CSUpload>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed
                            label="操作">
                            <template slot-scope="scope">
                                <CBtn @click="listContent.splice(scope.$index, 1)">删除</CBtn>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="合成路线" name="listHecheng">
                    <CBtn @click="addHecheng">新增</CBtn>
                    <el-table :data="listHecheng" max-height="450">
                        <el-table-column
                            fixed
                            label="合成描述">
                            <template slot-scope="scope">
                                <CText :size="4" v-model="scope.row.txtContent"></CText>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed
                            label="操作">
                            <template slot-scope="scope">
                                <CBtn @click="listHecheng.splice(scope.$index, 1)">删除</CBtn>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="附件" name="listFile">
                    <CBtn @click="addFile">新增</CBtn>
                    <el-table :data="listFile" max-height="450">
                        <el-table-column
                            fixed
                            label="标题">
                            <template slot-scope="scope">
                                <CSUpload :isFile="true" :size="2" v-model="scope.row.fileUrl" @upSuccess="upSuccess($event, scope.row)"></CSUpload>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
            
            
        </CDailog>
    </div>
</template>

<script>
import pagingMixin from '@/mixin/pagingMixin'

const defaultContent = {
    sortNum: 0,
    contentType: "T",
    txtContent: '',
    imgSrc: ""
}

const defaultHecheng = {
    sortNum: 0,
    contentType: "HC",
    txtContent: '',
    imgSrc: ""
}

const defaultFile = {
    sortNum: 0,
    fileName: "",
    fileUrl: "",
    fileSize: 0
}

export default {
    mixins: [pagingMixin],
    data() {
        return {
            curTab: "base",
            model: "info",
            table: "InfoHuaxSyndb",
            listContent: [],
            listHecheng: [],
            listFile: []
        }
    },
    created() {
        this.templateId = "2f705b2a-0c7c-485b-a2e6-66bddae69e0f";
        
        //取得查询条件
        this.$sys.getPageConditions({id: this.templateId}).then(res => {
            this.listCondition = res.data;
        })
        //查询表格数据
        this.search(1);
    },
    methods: {
        addContent() {
            this.listContent.push({...defaultContent, sortNum: this.listContent.length});
        },
        addHecheng() {
            this.listHecheng.push({...defaultHecheng, sortNum: this.listHecheng.length});
        },
        addFile() {
            this.listFile.push({...defaultFile, sortNum: this.listFile.length});
        },
        upSuccess(file, row) {
            row.fileName = file.name;
            row.fileSize = file.size;
        },
        doSave() {
            if (this.$refs.inForm) {
                this.$refs.inForm.validate((valid) => {
                    if (valid) {
                        this.$info.saveSyndb({
                            syndb: this.mm,
                            listContent: this.listContent,
                            listHecheng: this.listHecheng,
                            listFile: this.listFile
                        }).then(res => {
                            if (200 == res.code) {
                                this.isShowEdit = false;
                                this.search(1);
                                this.$message.success("保存成功")
                            } else {
                                this.$message.error("保存失败")
                            }
                        });
                    }
                });
            } else {
                this.$info.saveSyndb({
                            syndb: this.mm,
                            listContent: this.listContent,
                            listHecheng: this.listHecheng,
                            listFile: this.listFile
                        }).then(res => {
                    if (200 == res.code) {
                        this.isShowEdit = false;
                        this.search(1);
                        this.$message.success("保存成功")
                    } else {
                        this.$message.error("保存失败")
                    }
                });
            }
        },
        showEdit(row) {
            this.$info.getSyndbById({id: row.id}).then(res => {
                this.mm = res.data.syndb;
                this.listContent = res.data.listContent;
                this.listHecheng = res.data.listHecheng;
                this.listFile = res.data.listFile;

                this.isShowEdit = true;
            })
        }
    }
}
</script>

<style lang="scss" scoped></style>